<template>
  <div class="app">
    <!-- <div class="oBContent"> -->
    <div class="OBBox">
      <div class="topBox">
        <div style='margin-left:10px;'>
          <el-button type="primary" class="el-icon-plus">新患者</el-button>
          <el-button type="primary">患者查询</el-button>
        </div>
        <div class="Title">
          <h1>O-RING</h1>
        </div>
        <div style='margin-right:10px;'>
          <el-button type="primary">操作员：未知</el-button>
          <el-button>帮助</el-button>
        </div>
      </div>
      <div class="contentBox">
        <!-- 左侧编辑区域 -->
        <div class="editBox">
          <div class="patientBox editstyle">
            <h3>患者信息</h3>
            <el-form :label-position="labelPosition" ref="patientfrom" label-width="90px" :model="formLabelAlign">
              <el-form-item label="编号:">
                <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="性别：">
                <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="年龄：">
                <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="住院编号：">
                <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="科室：">
                <el-input v-model="formLabelAlign.region" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="床位号：">
                <el-input v-model="formLabelAlign.type" :disabled="disabled"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="rackrotation editstyle">
            <h3>机架旋转</h3>
            <el-form :model="formLabelAlign" ref="ruleForm" :rules="rules" :label-position="labelPosition"
              label-width="95px">
              <el-form-item label="当前位置:" prop="weizhi" :rules="rules.negativenumber">
                <el-input v-model="formLabelAlign.weizhi" disabled></el-input>
                <span class="celsius">°</span>
              </el-form-item>
              <el-form-item label="给定位置：" prop="name" :rules="rules.negativenumber">
                <el-input v-model="formLabelAlign.name"></el-input>
                <span class="celsius">°</span>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="gantrymovement('ruleForm')">机架运动</el-button>

          </div>
          <div class="rackdeflection editstyle">
            <h3>机架倾斜</h3>
            <el-form :label-position="labelPosition" ref="rackdeflection" :rules="rules" label-width="95px"
              :model="formLabelAlign">
              <el-form-item label="当前位置:" prop="name" :rules="rules.negativenumber">
                <el-input v-model="formLabelAlign.name" disabled></el-input>
                <span class="celsius">°</span>
              </el-form-item>
              <el-form-item label="给定位置：" prop="name" :rules="rules.negativenumber">
                <el-input v-model="formLabelAlign.name"></el-input>
                <span class="celsius">°</span>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="rackdeflection('rackdeflection')">执行机架偏转</el-button>
          </div>
          <div class="FOVBox editstyle">
            <h3></h3>
            <el-form :label-position="labelPosition" label-width="90px" :model="fovfrom">
              <el-form-item label="FOV选择:">
                <el-select v-model="fovfrom.type" placeholder="请选择">
                  <el-option label="正常FOV" value="0"></el-option>
                  <el-option label="偏转大FOV" value="1"></el-option>
                </el-select>
              </el-form-item>


            </el-form>
            <el-button type="primary" @click="plateoffset">平板偏移</el-button>
          </div>
          <div class="laserBox editstyle">
            <el-button @click="laserBtn(1)">激光1</el-button>
            <el-button @click="laserBtn(2)">激光2</el-button>
            <el-button @click="laserBtn(3)">激光3</el-button>
            <el-button @click="laserBtn(4)">激光4</el-button>
            <el-button @click="laserBtn(5)">激光5</el-button>
            <el-button @click="laserBtn(6)">激光6</el-button>

          </div>
          <div class="exposure editstyle">
            <h3>曝光操作</h3>
            <el-form :label-position="labelPosition" label-width="0px" :model="exposurefrom">
              <el-form-item label="">
                <el-select v-model="exposurefrom.modeType" placeholder="" @change="modeTypecchange">
                  <el-option label="DDR" value="0"></el-option>
                  <el-option label="CBCT" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="exposurefrom.pageNumber" placeholder="" :disabled="modeTydisabled">
                  <el-option label="180张" value="0"></el-option>
                  <el-option label="360张" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="exposurecontent">
              <div class="exposurelf">
                <div class="exposureIcon">
                  <div class="el-icon-sunny"></div>
                </div>
                <el-button type="warning" @click="exposurepreparation">曝光准备</el-button>
              </div>
              <div class="exposurert">
                <div id="myechart"></div>
              </div>


            </div>

          </div>
        </div>
        <!-- 右侧图像展示区域 -->
        <div class="viewBox">
          <div class="view">

            <div class="viewtoolBox">

              <el-carousel arrow="always" :autoplay="false">
                <!-- v-for="item in 4" :key="item" -->
                <el-carousel-item >
                  <div id="cornerstone"  style="width:500px; height:651px;background:#fff">
                    
                  </div>

                </el-carousel-item>
                <div class="pageBox">
                  <div class="page">
                    <p>图像编号：<span>2024065061</span></p>
                    <p>共<span>&nbsp;&nbsp;&nbsp;&nbsp;12&nbsp;&nbsp;&nbsp;&nbsp;</span>张
                      第<span>&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;</span>张</p>
                  </div>
                  <div class="direction">
                    <div>|< </div>
                        <div></div>
                        <div></div>
                        <div>>|</div>
                        <div>*</div>
                        <div>$</div>
                    </div>
                  </div>
              </el-carousel>

              <div class='imageBtn'>
                <el-button type="primary">
                  <img src="./assets/images/rotate.png" alt="">
                  <span class='text'>旋转</span>
                </el-button>
                <el-button type="primary">
                  <img src="./assets/images/flip.png" alt="">
                  <span class='text'>翻转</span>
                </el-button>
                <el-button type="primary">
                  <img src="./assets/images/brightness.png" alt="">
                  <span class='text'>亮度</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/contrastratio.png" alt="">
                  <div class='text' style="
                   word-break: break-all;
                            white-space: normal;
                            height: auto;
                            line-height: 1.5;">对比度</div>
                </el-button>
                <el-button type="primary">
                  <img src="./assets/images/ruler.png" alt="">
                  <span class='text'>标尺</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/zoom.png" alt="">
                  <span class='text'>缩放</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/Reset.png" alt="">
                  <span class='text'>重置</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/label.png" alt="">
                  <span class='text'>标注</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/layer.png" alt="">
                  <span class='text'>图层</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/translation.png" alt="">
                  <span class='text'>平移</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/edge.png" alt="">
                  <span class='text' style="
                   word-break: break-all;
                            white-space: normal;
                            height: auto;
                            line-height: 1.5;">边缘增强</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/save.png" alt="">
                  <span class='text'>保存</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/Printing.png" alt="">
                  <span class='text'>打印</span></el-button>
              </div>

              <!--窗位-->
              <div class="positionBox">
                <div class="positontext">
                  <div class="itemsdataBox" v-for="(items, indexs) in parameterList" :key="indexs">
                    <!-- 方向 -->
                    <div class="positionName">{{ items.name }}</div>
                    <!-- 滑块 -->
                    <div class="block">
                      <el-slider v-model="items.displacementvalue" show-input></el-slider>
                    </div>
                  </div>
                </div>
                <div class="reconstructionBtn">
                  <el-button type="primary">三维重建</el-button>
                </div>
              </div>

            </div>
            <div class="editimage">
              <div class="editbulbartube">
                <el-form :label-position="labelPosition" ref="rackdeflection" :rules="rules" label-width="0px"
                  :model="formLabelAlign">
                  <el-form-item label="" prop="name">
                    <el-input v-model="formLabelAlign.name" disabled></el-input>
                    <span class="celsius">°</span>
                  </el-form-item>
                  <el-form-item label="" prop="name">
                    <el-input v-model="formLabelAlign.name" disabled></el-input>
                    <span class="celsius">°</span>
                  </el-form-item>
                  <el-form-item label="" prop="name">
                    <el-input v-model="formLabelAlign.name" disabled></el-input>
                    <span class="celsius">°</span>
                  </el-form-item>
                  <el-form-item label="" prop="name">
                    <el-input v-model="formLabelAlign.name" disabled></el-input>
                    <span class="celsius">°</span>
                  </el-form-item>
                </el-form>
                <div class="viewBtn">
                  <el-button type="primary" @click="editdefaultBtn">修改默认参数</el-button>
                </div>
              </div>
              <div class="toolBox">暂定</div>
            </div>
          </div>

          <div class="view">
            <div class="viewtoolBox">
              <div class="showimage" style="background:#fff;height:651px;"></div>
              <div class='imageBtn' style="margin-top:75px;">
                <el-button type="primary">
                  <img src="./assets/images/save.png" alt="">
                  <span class='text'>保存</span>
                </el-button>
                <el-button type="primary">
                  <img src="./assets/images/upload.png" alt="">
                  <span class='text'>导出</span></el-button>
                <el-button type="primary">
                  <img src="./assets/images/transmission.png" alt="">
                  <span class='text'>传输</span></el-button>
              </div>
            </div>
            <div class="editimage">
              <div class="editbulbartube"> </div>
              <div class="toolBox">暂定</div>
            </div>



          </div>
        </div>
      </div>
    </div>
    <!-- 底部状态栏 -->
    <div class="footerBox">
      <div class="shutdownBox">关机</div>
      <div class="functionbuttonBox">
        <div class="btnBox">
          <el-button type="success">旋转机架</el-button>
          <el-button type="success">机架倾斜</el-button>
          <el-button type="success">高压球管</el-button>
          <el-button type="success">球管偏转</el-button>
          <el-button type="success">平板状态</el-button>
          <el-button type="success">平板偏转</el-button>
          <el-button type="success">限束器 </el-button>
          <el-button type="success">行走控制</el-button>
        </div>
      </div>
      <div class="stateBox">
        <p>进行中...</p>
      </div>
      <div class="electricitylevel">
        <p>47.8V</p>
        <p>电量</p>
      </div>
    </div>

    <!-- 修改球管参数弹窗 -->
    <el-dialog class="editdefaultmodal" title="球管曝光参数" :visible.sync="dialogVisible" center width="30%"
      @click="handleClose">
      <div class='editdefaultcontent'>
        <el-form :label-position="labelPosition" ref="rackdeflection" :rules="rules" label-width="85px"
          :model="formLabelAlign">
          <el-form-item label="管电压：" prop="name" :rules="rules.negativenumber">
            <el-input-number v-model="formLabelAlign.name" controls-position="right" :min="1"
              :max="10"></el-input-number>
            <span class="celsius">kV</span>
          </el-form-item>
          <el-form-item label="管电流：" prop="name" :rules="rules.negativenumber">
            <el-input-number v-model="formLabelAlign.name" controls-position="right" :min="1"
              :max="10"></el-input-number>
            <span class="celsius">mA</span>
          </el-form-item>
          <el-form-item label="曝光时间：" prop="name" :rules="rules.negativenumber">
            <el-input-number v-model="formLabelAlign.name" controls-position="right" :min="1"
              :max="10"></el-input-number>
            <span class="celsius">ms</span>
          </el-form-item>
          <el-form-item label="毫安秒：" prop="name" :rules="rules.negativenumber">
            <el-input-number v-model="formLabelAlign.name" controls-position="right" :min="1"
              :max="10"></el-input-number>
            <span class="celsius">mAs</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 认</el-button>
        <el-button @click="dialogVisible = false">放弃</el-button>

      </span>
    </el-dialog>

    <!-- 登录 -->
    <el-dialog class="loginModal" append-to-body :close-on-click-modal="false" title="" :visible.sync="islogin"
      width="30%" center>
      <div class='logincontent'>
        <el-form :label-position="labelPosition" ref="formName" :rules="rules" label-width="85px" :model="loginfrom">
          <el-form-item label="用户名：" prop="username" :rules="rules.accountnumber">
            <el-input v-model="loginfrom.username"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password" :rules="rules.password">
            <el-input v-model="loginfrom.password"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormNew('formName')">确 定</el-button>
        <el-button @click="islogin = false">取 消</el-button>

      </span>

    </el-dialog>



  </div>

</template>

<script setup lang="ts" src="./App.ts">
import Versions from './components/Versions.vue'

const ipcHandle = () => window.electron.ipcRenderer.send('ping')

</script>
<!-- <script  lang="ts" src="./App.ts"></script> -->

<style lang="less" scoped>
@import url(./App.less);
</style>
